<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>信用中心</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
  <div class="container">
    <header class="header">
      <button class="back-btn" onclick="window.history.back()">←</button>
      <h2>信用中心</h2>
    </header>
    
    <!-- 信用分数卡片 -->
    <div class="credit-card">
      <div class="credit-score">
        <div class="score-value">765</div>
        <div class="score-label">信用分</div>
      </div>
      <div class="credit-info">
        <div class="info-item">
          <span>等级</span>
          <span class="value">黄金会员</span>
        </div>
        <div class="info-item">
          <span>信用额度</span>
          <span class="value">¥15,000.00</span>
        </div>
        <div class="info-item">
          <span>已使用</span>
          <span class="value">¥3,200.00</span>
        </div>
      </div>
    </div>
    
    <!-- 信用服务 -->
    <div class="section">
      <h3>信用服务</h3>
      <div class="service-grid">
        <div class="service-item" onclick="openService('report')">
          <img src="{{ url_for('static', filename='img/xybg.png') }}" alt="信用报告">
          <p>信用报告</p>
        </div>
        <div class="service-item" onclick="openService('limit')">
          <img src="{{ url_for('static', filename='img/edts.png') }}" alt="额度提升">
          <p>额度提升</p>
        </div>
        <div class="service-item" onclick="openService('repay')">
          <img src="{{ url_for('static', filename='img/hk.png') }}" alt="还款">
          <p>还款</p>
        </div>
        <div class="service-item" onclick="openService('history')">
          <img src="{{ url_for('static', filename='img/jyjl.png') }}" alt="交易记录">
          <p>交易记录</p>
        </div>
      </div>
    </div>
    
    <!-- 信用权益 -->
    <div class="section">
      <h3>信用权益</h3>
      <div class="benefit-list">
        <div class="benefit-item">
          <div class="benefit-icon">💳</div>
          <div class="benefit-info">
            <h4>免息分期</h4>
            <p>大额消费免息分期，最长24期</p>
          </div>
        </div>
        <div class="benefit-item">
          <div class="benefit-icon">🎁</div>
          <div class="benefit-info">
            <h4>专属优惠</h4>
            <p>信用用户专享购物折扣</p>
          </div>
        </div>
        <div class="benefit-item">
          <div class="benefit-icon">✈️</div>
          <div class="benefit-info">
            <h4>出行特权</h4>
            <p>机场贵宾厅、快速通道</p>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 还款按钮 -->
    <button onclick="repayCredit()" class="repay-btn">立即还款</button>
    
    <!-- 信用提示 -->
    <div class="credit-tip">
      <p>按时还款有助于提升信用分，逾期将影响您的信用记录</p>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <nav class="bottom-nav">
    <a href="/" class="nav-item">
      <img src="{{ url_for('static', filename='img/sy.png') }}" alt="首页">
      <span>首页</span>
    </a>
    <a href="/pay" class="nav-item">
      <img src="{{ url_for('static', filename='img/sfk.png') }}" alt="收付款">
      <span>收付款</span>
    </a>
    <a href="/discover" class="nav-item">
      <img src="{{ url_for('static', filename='img/fx.png') }}" alt="发现">
      <span>发现</span>
    </a>
    <a href="/profile" class="nav-item">
      <img src="{{ url_for('static', filename='img/wd.png') }}" alt="我的">
      <span>我的</span>
    </a>
    <a href="/more" class="nav-item">
      <img src="{{ url_for('static', filename='img/gd.png') }}" alt="更多">
      <span>更多</span>
    </a>
  </nav>
  
  <script>
    // 信用服务功能
    function openService(serviceType) {
      const serviceNames = {
        'report': '信用报告',
        'limit': '额度提升',
        'repay': '还款',
        'history': '交易记录'
      };
      alert(`正在打开${serviceNames[serviceType]}`);
    }
    
    // 还款功能
    function repayCredit() {
      const amount = prompt('请输入还款金额：', '0.00');
      if (amount && parseFloat(amount) > 0) {
        if (confirm(`确认还款 ${amount} 元？`)) {
          alert(`还款成功！已还款 ${amount} 元`);
        }
      } else {
        alert('请输入有效的还款金额');
      }
    }
  </script>
  
  <style>
    /* 信用卡片样式 */
    .credit-card {
      background: linear-gradient(135deg, #1a237e, #283593);
      color: white;
      border-radius: var(--radius-md);
      padding: 20px;
      margin: 20px 0;
      box-shadow: var(--shadow-md);
      text-align: center;
    }
    
    .credit-score {
      margin-bottom: 20px;
    }
    
    .score-value {
      font-size: 3em;
      font-weight: bold;
      margin-bottom: 5px;
    }
    
    .score-label {
      font-size: 1.2em;
      opacity: 0.8;
    }
    
    .credit-info {
      display: flex;
      justify-content: space-around;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      padding-top: 15px;
    }
    
    .info-item {
      display: flex;
      flex-direction: column;
    }
    
    .info-item span:first-child {
      font-size: 0.9em;
      opacity: 0.8;
      margin-bottom: 5px;
    }
    
    .info-item .value {
      font-size: 1.1em;
      font-weight: 500;
    }
    
    /* 权益列表样式 */
    .benefit-list {
      margin-top: 10px;
    }
    
    .benefit-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--border-color);
    }
    
    .benefit-item:last-child {
      border-bottom: none;
    }
    
    .benefit-icon {
      font-size: 24px;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
    }
    
    .benefit-info h4 {
      font-size: 16px;
      margin-bottom: 5px;
    }
    
    .benefit-info p {
      font-size: 13px;
      color: var(--text-secondary);
    }
    
    /* 还款按钮 */
    .repay-btn {
      width: 100%;
      background: var(--secondary-gradient);
      font-size: 16px;
      padding: 12px;
      margin: 20px 0;
    }
    
    .credit-tip {
      text-align: center;
      font-size: 12px;
      color: var(--text-secondary);
      padding: 10px;
    }
  </style>
</body>
</html>